<template>
  <div class="app-container" style="display: flex; overflow: hidden;height: 100% !important;">
    <!-- 表单内容区 -->
    <div ref="scrollContainer" class="form-wrapper">
      <el-form :model="ruleForm" label-width="120px" size="small" ref="ruleForm">
        <!-- 登记信息 -->
        <div ref="step1" class="form-section">
          <h3 class="section-title">登记信息</h3>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="登记时间">
                <el-input v-model="ruleForm.createTime" disabled />
              </el-form-item>
            </el-col>
            <!-- <el-col :span="12">
              <el-form-item label="分流窗口">
                <el-input v-model="ruleForm.demandsSysUserName" disabled />
              </el-form-item>
            </el-col> -->
            <el-col :span="12">
              <el-form-item label="姓名">
                <el-input v-model="ruleForm.demandsName" disabled />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="性别">
                <el-input v-model="ruleForm.demandsSexNmae" disabled />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="身份证号">
                <el-input v-model="ruleForm.demandsCardno" disabled />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="所属辖区">
                <el-input v-model="townshipName" disabled />
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="家庭住址或单位">
                <el-input v-model="ruleForm.demandsAvatar" disabled />
              </el-form-item>
            </el-col>
          </el-row>
        </div>

        <!-- 窗口受理信息 -->
        <div ref="step2" class="form-section">
          <h3 class="section-title">窗口受理信息</h3>
          <el-row :gutter="20">
            <el-col :span="24">
              <el-form-item label="简要事由">
                <el-input type="textarea" v-model="ruleForm.checkinSummary" disabled />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="纠纷类型">
                <el-input v-model="ruleForm.checkinDictJflxName" disabled />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="手机号">
                <el-input v-model="ruleForm.checkinPhonenumber" disabled />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="处理部门">
                <el-input v-model="windowName" disabled />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="窗口经办人">
                <el-input v-model="ruleForm.checkinExperiencedSysUserName" disabled />
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="备注">
                <el-input v-model="ruleForm.checkinRemark" disabled />
              </el-form-item>
            </el-col>
          </el-row>
        </div>

        <!-- 部门处理信息 -->
        <div ref="step3" class="form-section">
          <h3 class="section-title">部门处理信息</h3>
          <el-form-item label="选择文件" prop="file">
            <FileUpload v-model="fileData" />
          </el-form-item>

          <el-form-item label="相关身份证信息">
            <div style="margin-bottom: 10px; font-size: 14px;display: flex;justify-content: space-between;">
              <span style="color: blue;"><span style="color: #999;">人员数量：</span>{{ mdjfCasePersonList.length }}</span>
              <el-button style="font-weight: 600;" size="mini" type="text" icon="el-icon-plus"
                @click="addPerson">增加人员信息</el-button>
            </div>
            <div v-for="(person, index) in mdjfCasePersonList" :key="index" class="related-person"
              style="display: flex;align-items: center;">
              <el-form-item :prop="'mdjfCasePersonList.' + index + '.casePersonName'" :rules="rules.casePersonName">
                <el-input v-model="person.casePersonName" placeholder="输入姓名" prefix-icon="el-icon-user"
                  style="width: 150px; margin-right: 10px" />
              </el-form-item>
              <el-form-item :prop="'mdjfCasePersonList.' + index + '.casePersonCardno'" :rules="rules.casePersonCardno">
                <el-input v-model="person.casePersonCardno" placeholder="输入身份证号" prefix-icon="el-icon-s-order"
                  style="width: 250px; margin-right: 10px" />
              </el-form-item>
              <el-form-item :prop="'mdjfCasePersonList.' + index + '.casePersonPhonenumber'"
                :rules="rules.casePersonPhonenumber">
                <el-input v-model="person.casePersonPhonenumber" placeholder="输入手机号" prefix-icon="el-icon-phone"
                  style="width: 200px; margin-right: 10px" />
              </el-form-item>
              <el-form-item :prop="'mdjfCasePersonList.' + index + '.remark'" :rules="rules.remark">
                <el-input v-model="person.remark" placeholder="输入备注" style=" margin-right: 10px" />
              </el-form-item>
              <el-button type="text" style="color: #999;margin-bottom: 18px" icon="el-icon-remove"
                @click="removePerson(index)" v-if="mdjfCasePersonList.length > 0"></el-button>
            </div>

          </el-form-item>

          <el-form-item label="部门经办人" prop="checkinExperiencedSysUserId">
            <el-select clearable v-model="checkinExperiencedSysUserId" style="width: 100%" placeholder="请选择部门经办人">
              <el-option v-for="(item, index) in deptUser" :value="item.userId" :label="item.userName"
                :key="index"></el-option>
            </el-select>
          </el-form-item>
          <el-col :span="12">
            <el-form-item label="接收人姓名">
              <el-input v-model="ruleForm.receptionName" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="接收人手机号">
              <el-input v-model="ruleForm.receptionPhone" disabled />
            </el-form-item>
          </el-col>
          <div style="text-align: center; margin-top: 20px; padding-bottom: 150px">
            <el-button type="primary" @click="submitForm('ruleForm')">确认</el-button>
            <el-button @click="cancelForm">取消</el-button>
          </div>
        </div>
      </el-form>
    </div>

    <!-- 右侧 Tabs 导航 -->
    <div class="tabs-wrapper">
      <div style="position: fixed;top: 140px;right: 200px;"> <el-tabs tab-position="right" v-model="activeTab"
          class="tabs" @tab-click="handleTabClick">
          <el-tab-pane label="登记信息" name="0"></el-tab-pane>
          <el-tab-pane label="窗口受理信息" name="1"></el-tab-pane>
          <el-tab-pane label="部门处理信息" name="2"></el-tab-pane>
        </el-tabs></div>
    </div>
  </div>
</template>

<script>
import { listNoAuth, getAccept, addDispose } from "@/api/aapal";
import { getInfo } from "@/api/login";
import { getDicts } from "@/api/system/dict/data"; /* 通用接口：字典 */
export default {
  computed: {
    townshipName() {
      return this.getTownshipNameById(this.ruleForm.checkinTownshipId);
    },
  },
  data() {
    return {
      windowName: '',
      mdjfCasePersonList: [],
      deptUser: "",
      activeTab: "0",
      checkinExperiencedSysUserId: '',
      ruleForm: {
        checkinExperiencedSysUserId: ''
      },
      checkin_township: [],
      fileData: "",
      rules: {
        casePersonName: [
          { required: true, message: "请输入姓名", trigger: "blur" },
        ],
        casePersonCardno: [
          { required: true, message: "请输入身份证号", trigger: "blur" },
          { validator: this.validateCardNo, trigger: "blur" },
        ],
        casePersonPhonenumber: [
          { required: true, message: "请输入手机号", trigger: "blur" },
          { validator: this.validatePhone, trigger: "blur" },
        ],
      },
    };
  },
  mounted() {
    this.$refs.scrollContainer.addEventListener("scroll", this.onScroll);
    this.getUserInfo();
    this.getDict();
    this.getAcceptData(this.$route.query.id);
  },
  beforeDestroy() {
    this.$refs.scrollContainer.removeEventListener("scroll", this.onScroll);
  },
  methods: {
    validateCardNo(rule, value, callback) {
      const reg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
      if (reg.test(value)) {
        callback();
      } else {
        callback(new Error("身份证号格式不正确"));
      }
    },
    validatePhone(rule, value, callback) {
      const reg = /^1[3-9]\d{9}$/;
      if (reg.test(value)) {
        callback();
      } else {
        callback(new Error("手机号格式不正确"));
      }
    },
    /* 获取乡镇字典数据 */
    getTownshipNameById(id) {
      let townshipName = "";
      this.checkin_township.forEach((item) => {
        if (item.dictCode == id) {
          townshipName = item.dictLabel;
        }
      });
      return townshipName;
    },
    getDict() {
      getDicts("checkin_township").then((res) => {
        this.checkin_township = res.data;
      });
    },
    getDeptUer() {
      listNoAuth({ deptId: this.deptId }).then((res) => {
        this.deptUser = res.rows.filter(row => row.userId != 1);
      });

    },
    getUserInfo() {
      getInfo().then((res) => {
        this.windowName = res.user.nickName
        // this.ruleForm.demandsSysUserId = res.user.userId
        // this.deptName = res.user.dept.deptName
        this.deptId = res.user.dept.deptId;
        // this.ruleForm.checkinDeptId = this.deptId
        this.getDeptUer();
      });
    },
    getAcceptData(id) {
      getAccept(id).then((response) => {
        this.ruleForm = response.data;
        this.mdjfCasePersonList = response.data.mdjfCasePersonList;
      });
    },
    handleTabClick(tab) {
      // const refsMap = ["step1", "step2", "step3"];
      // const target = this.$refs[refsMap[Number(tab.name)]];
      // if (target) {
      //   target.scrollIntoView({ behavior: "smooth" });
      // }
    },
    onScroll() {
      const scrollTop = this.$refs.scrollContainer.scrollTop;
      const sections = [this.$refs.step1, this.$refs.step2, this.$refs.step3];
      for (let i = 0; i < sections.length; i++) {
        if (scrollTop + 100 >= sections[i].offsetTop) {
          this.activeTab = String(i);
        }
      }
    },
    addPerson() {
      this.mdjfCasePersonList.push({
        name: "",
        idNumber: "",
        caseMainId: this.ruleForm.caseMainId,
        remark: ''
      });
    },
    removePerson(index) {
      this.mdjfCasePersonList.splice(index, 1);
    },
    handleRemove(file, fileList) {
      this.mdjfCasePersonList.files = fileList;
    },
    handleSuccess(response, file, fileList) {
      this.mdjfCasePersonList.files = fileList;
    },
    handlePreview(file) {
      window.open(file.url || file.response?.url);
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.ruleForm.checkinExperiencedSysUserId = this.checkinExperiencedSysUserId;
          addDispose({
            ...this.ruleForm,
            deptdisposeFile: this.fileData,
            mdjfCasePersonList: this.mdjfCasePersonList,
          }).then((res) => {
            if (res.code === 200) {
              this.$message.success("提交成功");
              this.$router.push({ path: "/dispose/dispose" });
            }
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    cancelForm() {
      this.$router.push({ path: "/dispose/dispose" });
    },
  },
};
</script>

<style scoped>
.form-wrapper {
  flex: 1;
  height: 100vh;
  overflow-y: auto;
  padding-right: 30px;
}

.tabs-wrapper {
  width: 200px;
  margin: 0 300px;
}

.tabs ::v-deep .el-tabs__item {
  text-align: left;
  padding: 12px 10px;
  font-weight: 500;
  cursor: pointer;
}

.section-title {
  margin: 0px 0 20px;
  font-size: 16px;
  font-weight: bold;
  color: #3c82f5;
  border-left: 4px solid #3c82f5;
  padding-left: 10px;
}

.form-section {
  background: #fff;
  /* padding: 20px; */
  border-radius: 6px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.related-person {
  margin-left: -100px;
}
</style>
